<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <form action="" autocomplete="off">
          <div class="row">
            <div class="col-lg-3">
              <input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
            </div>
            <div class="col-lg-3">
              <select class="form-control" name="gender">
                <option value="">--选择性别--</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="col-lg-3">
              <input name="age" type="text" class="form-control" placeholder="输入年龄" />
            </div>
            <div class="col-lg-3">
              <button type="button" class="btn btn-success" id="search">
                搜索
              </button>
              <button type="button" class="btn btn-warning" id="reset">
                重置
              </button>
              <!-- 添加按钮 -->
              <button type="button" class="btn btn-primary" id="add">
                添加
              </button>
            </div>
          </div>
        </form>
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>年龄</th>
            <th>操作区</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td>18</td>
            <td>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- 模态框开始 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">添加英雄</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" autocomplete="off">
            <div class="form-group">
              <label for="" class="col-sm-2 control-label">英雄名称</label>
              <div class="col-sm-10">
                <input type="text" name="heroName" class="form-control" placeholder="输入英雄名称" />
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-2 control-label">性别</label>
              <div class="col-sm-10">
                <div class="radio">
                  <label>
                    <input type="radio" name="heroGender" value="男" checked />
                    男
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="heroGender" value="女" />
                    女
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-2 control-label">年龄</label>
              <div class="col-sm-10">
                <input type="number" class="form-control" placeholder="输入英雄年龄" name="heroAge" />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="addFormCancel">
            取消
          </button>
          <button id="submit" type="button" class="btn btn-primary">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框结束 -->
  <script src="./jquery/jquery.min.js"></script>
  <script src="./bootstrap/js/bootstrap.js"></script>
  <script>

    // const list = [
    //   { id: 1, name: "大乔", gender: "男", age: 18 },
    //   { id: 2, name: "小乔", gender: "女", age: 20 },
    //   { id: 3, name: "鲁班", gender: "男", age: 48 },
    //   { id: 4, name: "后羿", gender: "女", age: 28 },
    //   { id: 8, name: "廉颇", gender: "男", age: 28 },
    // ]

    function getItem() {
      let arr = localStorage.getItem('list') || []
      let obj = JSON.parse(arr)
      return obj
    }

    console.log(getItem())

    function setItem(data = []) {
      let str = JSON.stringify(data)
      localStorage.setItem('list', str)
    }

    // setItem([
    //   { id: 1, name: "大乔", gender: "男", age: 18 },
    //   { id: 2, name: "小乔", gender: "女", age: 20 },
    //   { id: 3, name: "鲁班", gender: "男", age: 48 },
    //   { id: 4, name: "后羿", gender: "女", age: 28 },
    //   { id: 8, name: "廉颇", gender: "男", age: 28 },
    // ])

    // 1、渲染数据
    let tbody = document.querySelector('#tbody')
    function render(arr) {
      arr = getItem()
      const res = arr.map((item, index) => `<tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.gender}</td>
            <td>${item.age}</td>
            <td>
              <button data-index="${index}" type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
      `)
      tbody.innerHTML = res.join('')

      // 文本框清空操作
      document.querySelector('input[name=name]').value = ''
      document.querySelector('select[name=gender]').value = ''
      document.querySelector('input[name=age]').value = ''

    }
    render()

    // 2、根据条件进行搜索
    let search = document.querySelector('#search')
    search.addEventListener('click', function () {
      let name = document.querySelector('input[name=name]').value.trim()
      let gender = document.querySelector('select[name=gender]').value.trim()
      let age = document.querySelector('input[name=age]').value.trim()
      // 声明一个数组arr得到所有的英雄数据
      let arr = getItem()
      // 如果有name，就按照name进行筛选s
      if (name) {
        arr = arr.filter(item => item.name === name)
      }
      // 如果有gender，就按照gender进行筛选
      if (gender) {
        arr = arr.filter(item => item.gender === gender)
      }
      // 如果有age，就按照age进行筛选
      if (age) {
        arr = arr.filter(item => item.age === +age)
      }

      // 将筛选好的 arr 进行渲染
      render(arr)

    })

    // 删除功能
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'BUTTON') {
        let choose = confirm('是否要删除')
        if (choose) {
          let arr = getItem()
          arr.splice(e.target.dataset.index, 1)
          render(setItem(arr))
        }
      }
    })

    // 重置功能
    document.querySelector('#reset').addEventListener('click', () => location.reload())

    // 添加功能
    let addBtn = document.querySelector('#add')
    let myModal = document.querySelector('#myModal')

    addBtn.addEventListener('click', function () {
      $("#myModal").modal("show")
    })


    // 模态框功能
    let modalBody = document.querySelector('.modal-body')
    // 模态框确认按钮
    let addSubmit = document.querySelector('#submit')
    //模态框英雄名称文本框
    let heroName = document.querySelector('.modal-body input[name=heroName]')
    //模态框年龄称文本框
    let heroAge = document.querySelector('.modal-body input[name=heroAge]')
    //模态框性别称文本框
    let heroGender = document.querySelectorAll('.modal-body input[name=heroGender]')

    // 模态框功能
    addSubmit.addEventListener('click', function () {
      if (heroName.value.trim() === '' || heroAge.value.trim() === '') {
        alert('请输入内容')
        return
      }
      let arr = getItem()

      let ids = arr.map(item => item.id)
      let max = ids[0] ? ids[0] : 0
      for (let i = 1; i < ids.length; i++) {
        if (max < ids[i]) {
          max = ids[i]
        }
      }

      let str = ''
      for (let i = 0; i < heroGender.length; i++) {
        if (heroGender[i].checked === true) {
          str = heroGender[i].value
        }
      }

      arr.push(
        {
          id: max + 1,
          name: heroName.value.trim(),
          gender: str,
          age: heroAge.value
        }
      )
      setItem(arr)
      render(getItem())
      heroName.value = ''
      heroAge.value = ''
      $("#myModal").modal("hide")
    })

  </script>
</body>

</html>